<template>
  <div class="settings-view">
    <el-container>
      <el-header class="settings-header">
        <h1>设置</h1>
      </el-header>
      <el-main class="settings-main">
        <el-card class="settings-card">
          <template #header>
            <span>用户设置</span>
          </template>
          <el-form :model="userSettings" label-width="120px">
            <el-form-item label="昵称">
              <el-input v-model="userSettings.nickname" placeholder="请输入昵称" />
            </el-form-item>
            <el-form-item label="头像">
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="userSettings.avatar" :src="userSettings.avatar" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="userSettings.status" placeholder="请选择状态">
                <el-option label="在线" value="online" />
                <el-option label="离开" value="away" />
                <el-option label="忙碌" value="busy" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>

        <el-card class="settings-card">
          <template #header>
            <span>通知设置</span>
          </template>
          <el-form :model="notificationSettings" label-width="120px">
            <el-form-item label="消息通知">
              <el-switch v-model="notificationSettings.messageNotification" />
            </el-form-item>
            <el-form-item label="声音提醒">
              <el-switch v-model="notificationSettings.soundNotification" />
            </el-form-item>
            <el-form-item label="桌面通知">
              <el-switch v-model="notificationSettings.desktopNotification" />
            </el-form-item>
          </el-form>
        </el-card>

        <el-card class="settings-card">
          <template #header>
            <span>系统设置</span>
          </template>
          <el-form :model="systemSettings" label-width="120px">
            <el-form-item label="主题">
              <el-select v-model="systemSettings.theme" placeholder="请选择主题">
                <el-option label="浅色" value="light" />
                <el-option label="深色" value="dark" />
                <el-option label="自动" value="auto" />
              </el-select>
            </el-form-item>
            <el-form-item label="语言">
              <el-select v-model="systemSettings.language" placeholder="请选择语言">
                <el-option label="中文" value="zh-CN" />
                <el-option label="English" value="en-US" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>

        <div class="settings-actions">
          <el-button type="primary" @click="saveSettings">保存设置</el-button>
          <el-button @click="resetSettings">重置设置</el-button>
          <el-button type="danger" @click="logout">退出登录</el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const router = useRouter()
const authStore = useAuthStore()

const userSettings = ref({
  nickname: '',
  avatar: '',
  status: 'online'
})

const notificationSettings = ref({
  messageNotification: true,
  soundNotification: true,
  desktopNotification: false
})

const systemSettings = ref({
  theme: 'light',
  language: 'zh-CN'
})

const beforeAvatarUpload = (file: File) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    ElMessage.error('头像只能是 JPG/PNG 格式!')
  }
  if (!isLt2M) {
    ElMessage.error('头像大小不能超过 2MB!')
  }
  return isJPG && isLt2M
}

const saveSettings = () => {
  // 保存设置逻辑
  ElMessage.success('设置保存成功')
}

const resetSettings = () => {
  // 重置设置逻辑
  ElMessage.info('设置已重置')
}

const logout = async () => {
  try {
    await authStore.logout()
    router.push('/login')
    ElMessage.success('已退出登录')
  } catch (error) {
    ElMessage.error('退出登录失败')
  }
}

onMounted(() => {
  // 加载用户设置
  if (authStore.user) {
    userSettings.value.nickname = authStore.user.nickname
    userSettings.value.avatar = authStore.user.avatar
  }
})
</script>

<style scoped lang="scss">
.settings-view {
  height: 100vh;
  background-color: #f5f5f5;
}

.settings-header {
  background-color: #409EFF;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;

  h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
  }
}

.settings-main {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.settings-card {
  margin-bottom: 20px;
}

.avatar-uploader {
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:hover {
      border-color: #409EFF;
      color: #409EFF;
    }
  }
}

.settings-actions {
  text-align: center;
  margin-top: 30px;

  .el-button {
    margin: 0 10px;
  }
}

@media (max-width: 768px) {
  .settings-main {
    padding: 10px;
  }

  .settings-actions {
    .el-button {
      display: block;
      width: 100%;
      margin: 10px 0;
    }
  }
}
</style>